<template>
    <div class="audit-collect-video-detail" v-loading="loading">
        <div class="top-flex-box">
            <div class="left-flex-box">
                <div class="show-video-box">
                    <video
                        controls="controls"
                        ref="readio"
                        autoplay="autoplay"
                        class="video"
                        :src="detail.videoUrl">
                    </video>
                </div>
                <div class="video-playbackRate">
                    <span>播放速度：</span>
                    <el-select v-model="playbackRate" style="width:100px;" placeholder="请选择" @change="playbackRateChange">
                        <el-option label="1倍" :value="1"></el-option>
                        <el-option label="1.25倍" :value="1.25"></el-option>
                        <el-option label="1.5倍" :value="1.5"></el-option>
                        <el-option label="2倍" :value="2"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="right-flex-box">
                <el-form
                    :model="detail"
                    :rules="rules"
                    :hide-required-asterisk="true"
                    ref="detail"
                    label-width="140px"
                    class="input-no-border-box">
                    <el-form-item label="封面" prop="name">
                        <uploadOwnImg v-model="detail.videoCover" :needTransform="1"/>
                    </el-form-item>
                    <el-form-item label="标题" prop="desc">
                        <el-input type="textarea" v-model="detail.videoTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="关联游戏" prop="region">
                        <el-select
                            style="width:300px"
                            v-model.trim="detail.appName"
                            clearable
                            filterable
                            :filter-method="filterMethod"
                            :loading="gameLoading"
                            @change="gameChange"
                            placeholder="请输入并选择游戏">
                            <el-option
                                v-for="item in gameList"
                                :key="item.gameid"
                                :label="item.appName"
                                :value="item.appName">
                                    <span style="float: left">{{ item.appName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频类型" prop="type">
                        <el-select v-model="detail.category" @change="typeChange" placeholder="请选择视频类型">
                            <el-option :label="item.name" :value="item.name" v-for="(item, index) in videoTypeList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道" prop="type">
                        <span v-if="detail.collectSource === '0'">微博</span>
                        <span v-else>taptap</span>
                    </el-form-item>
                    <el-form-item label="发布者">
                        <span>{{detail.publishUserName}}</span>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-select v-model="detail.userName" placeholder="请选择作者" style="width:300px" @change="userChange">
                            <el-option :label="item.userName" :value="item.userName" v-for="item in userList" :key="item.id">
                                <span style="float: left">{{ item.userName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布时间">
                        <span>{{detail.createTime | timeNo0}}</span>
                    </el-form-item>
                    <el-form-item label="状态" prop="resource">
                        <span v-if="detail.status === '1'">待审核</span>
                        <span v-else>已采集</span>
                    </el-form-item>
                    <el-form-item label="游戏首页推荐" prop="delivery">
                        <el-switch v-model="detail.homePageIndex"></el-switch>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="sumbmit-box">
            <el-button style="width:150px;" size="small" @click="close">返 回</el-button>
            <el-button style="width:150px;" size="small" type="primary" v-if="detail.status === '1'" @click="btnUp">上 架</el-button>
            <el-button style="width:150px;" size="small" type="danger" @click="del">删 除</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            gameLoading: false,
            gameList: [],
            detail: {
                videoid: '',
                userid: '',
                appid: '',
                url: '',
                size: 0,
                duration: null,
                cover: '',
                title: '',
                showType: 0,
                delStatus: 0,
                isDraft: 0,
                type: 0,
                gameTopic: null,
                auditStatus: 1,
                auditReason: null,
                storageid: null,
                rewardCoinNum: 0,
                thumbsNum: 5,
                commentNum: 0,
                shareNum: 0,
                playNum: 0,
                showHome: 1,
                homeWeight: null,
                height: 0,
                width: 0,
                createTime: '',
                updateTime: '',
                sourceFrom: null,
                adminId: null,
                adminName: null,
                userName: '',
                rewardNum: null,
                complainNum: null,
                category: '',
                categoryName: '',
                categoryIcon: '',
                identify: ''
            },
            rules: {
                // name: [
                //     { required: true, message: '请输入活动名称', trigger: 'blur' },
                //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                // region: [
                // ],
                // date1: [
                //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                // ],
                // date2: [
                //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                // ],
                // type: [
                //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                // ],
                // resource: [
                //     { required: true, message: '请选择活动资源', trigger: 'change' }
                // ],
                // desc: [
                //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                // ]
            },

            playbackRate: 1
        }
    },
    props: ['data', 'userList', 'videoTypeList'],
    created () {
        console.log(this.data)
        this.detail = this.data
        // if (this.$route.query.id) {
        //     this.getDetail()
        // }
        // if (this.$route.query.name) {
        //     this.detail.gameName = this.$route.query.name
        // }
    },
    methods: {
        // 获取视频详情
        async getDetail () {
            this.loading = true
            let res = await this.$http.post('/video/gameVideoDetail', {
                videoId: this.$route.query.id
            })
            if (res.code === '0') {
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        playbackRateChange (val) {
            this.$refs.readio.playbackRate = val
        },

        // 查询游戏
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        },
        async getgameList (keyword) {
            let params = {
                keyword,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/home/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        gameChange (val) {
            this.detail.aboutGameName = val
            this.gameList.forEach(item => {
                if (item.appName === val) {
                    this.detail.appid = item.gameid
                }
            })
        },

        typeChange (val) {
            this.videoTypeList.forEach(item => {
                if (item.name === val) {
                    this.detail.categoryId = item.category
                }
            })
        },

        userChange (val) {
            this.userList.forEach(item => {
                if (item.userName === val) {
                    this.detail.userId = item.id
                }
            })
        },

        async btnUp () {
            let res = await this.$http.post('/spider/updateCollectVideo', this.detail)
            if (res.code === '0') {
                // this.detail.status = '1'
                // this.$message({
                //     type: 'success',
                //     message: '上架成功'
                // })
                this.up()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 上架
        async up () {
            let res = await this.$http.get('/spider/up', {
                params: {
                    videoId: this.detail.id
                }
            })
            if (res.code === '0') {
                this.detail.status = '0'
                this.$message({
                    type: 'success',
                    message: '上架成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 删除视频
        async del () {
            // let res = await this.$http.post('/video/addGameVideo', this.detail)
            // if (res.code === '0') {
            //     this.$message({
            //         type: 'success',
            //         message: '保存成功'
            //     })
            // } else {
            //     this.$message({
            //         typeJ: 'error',
            //         message: res.desc
            //     })
            // }
        },

        // 返回
        close () {
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
    .audit-collect-video-detail {
        .top-flex-box {
            display: flex;
            .left-flex-box {
                width: 400px;
                padding: 0 20px;
                .show-video-box {
                    height: 640px;
                    // background-color: #000000;
                    border: 1px dashed #cccccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .video {
                        width: 100%;
                        max-height: 100%;
                        outline: none;
                    }
                }
                .video-playbackRate {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                }
            }
            .right-flex-box {
                flex: 1;
            }
        }

        .sumbmit-box {
            width: 600px;
            margin: 30px auto 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .go-game-detail {
            font-size: 12px;
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>
